<style lang="scss" scoped="">
  #datafile {
      display: none;
    }
	table {
		width: 100%;
	}
    ol,ul,li{list-style: none;}
    .content{
      height: auto;
      width: 100%;
      margin-top: 10px ;
      padding: 0 20px;
    }
    .content ul{
      height: 60px;
      width: 100%;
      margin-bottom: 20px;
    }
    .content ul::after{
      content: '';
      display:inline-block;
      width: 100%;
      height: 1px;
      background: #D1DBE8;
      position: relative;top: -16px;
    }
    .content li{
      font-size: 15px;
      text-align: center;
      width:120px;
      float: left;
      height: 40px;
      line-height: 28px;
      margin: 10px 16px 0 0;
      cursor: pointer;
    }

    .checked{
      color:rgba(14, 135, 251, 1);
      border-bottom: 3px solid rgba(14, 135, 251, 1);
    }
</style>
<template>
  <div id="dataInfo">
    <section class="content">
      <ul>
        <li :class="{checked: checked == 1}" @click="checked = 1">总览</li>
        <li :class="{checked: checked == 2}" @click="checked = 2"><Badge :count="etlDataList.length">开放数据订购概览</Badge></li>
        <li :class="{checked: checked == 3}" @click="checked = 3"><Badge :count="apiServiceDatas.length">开放API订购概览</Badge></li>
        <li :class="{checked: checked == 4}" @click="checked = 4"><Badge :count="seversList.length">服务器订购概览</Badge></li>
        <li :class="{checked: checked == 5}" @click="checked = 5"><Badge :count="account.length">账号申请概览</Badge></li>
      </ul>
      <div class="tables">
        <div v-show="checked == 1">
          <component :is="'projectInfo'" :ifedit="true" :reqId="reqId" :ProleList="roleList" :Papply="applyinfo"
            :PprojectList="projectList" :isStepAll="true"></component>
          <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>资源信息</p>
          </div>
          <component :is="'resoureceInfo'" :key="updateModel" :ifedit="true" :Papply="applyinfo" :Presources="resourcesInfo"></component>
          <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>工具信息</p>
          </div>
          <component :is="'toolInfo'" :key="updateModel + 1" :isEdit="isEdit" :reqId="reqId" :ifedit="true" :Papply="applyinfo"
            :tempTool="tempTool" :Ptool="toolInfo"></component>
          <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>服务器信息</p>
          </div>
          <div v-show="seversList.length > 0">
              <component ref="server_model" :is="'server_model'" v-model="seversList" :ifedit="true" :Papply="applyinfo">
              </component>
          </div>
          <div v-show="seversList.length == 0">
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无数据资源</span>
            </div>
          </div>

<!--           <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>账号信息</p>
          </div>
          <div v-show="account.length > 0">
              <component ref="account" :is="'account'" v-model="account" :isEdit="false" :isShow="true" :ifedit="ifedit" :isSon="false"
                style="width:93.5%;position:relative;left:4%"></component>
          </div>
          <div v-show="account.length == 0">
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号信息</span>
            </div>
          </div> -->

          <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>附件信息</p>
          </div>
          <component :is="'file'" :ifedit="true" :filesList="filesList" v-model="applyinfo.files"></component>
        </div>
        <div v-show="checked == 2">
          <div class="gcontent" v-if="etlDataList.length > 0">
            <dataList v-model="etlDataList" :ifedit="true"></dataList>
          </div>
          <template v-else>
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无数据资源</span>
            </div>
          </template>
        </div>
        <div v-show="checked == 3">
          <template v-if="apiServiceDatas.length > 0">
             <Table border :columns="apiServColumns"  :data="apiServiceDatas" >
               <template slot-scope=" { row, index }" slot="action">
                 <Button type="primary" @click="getApiServInfo(row.apiCode)">详情</Button>
               </template>
             </Table>
             <Modal v-model="showAPIServiceInfo"  width="96%" >
              <span slot="header" style="font-size: 22px; font-weight: bold;">{{apiTitle}}</span>
              <apiServiceInfo v-if="showAPIServiceInfo"  :apiTitle="apiTitle" :apiServInfo="apiServInfo"></apiServiceInfo>
            </Modal>
          </template>
          <template v-else>
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无数据资源</span>
            </div>
          </template>

        </div>
        <div v-show="checked == 4">
            <template v-if="seversList.length > 0">
                <component ref="server_model" :is="'server_model'" v-model="seversList"
                  :ifedit="true" :isApply="true"></component>
            </template>
            <template v-else>
              <div class="gcontent" style="text-align:center">
                <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无数据资源</span>
              </div>
            </template>
        </div>
        <div v-show="checked == 5">
          <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
              <p>账号使用人员信息</p>
          </div>
          <div class="gcontent">
              <template v-if="applyinfo.account.people.length > 0">
                  <usePeople ref="usePeople" v-model="applyinfo.account.people" :ifedit="true" :peopleList="applyinfo.account.peopleList" :isShow="true"></usePeople>
              </template>
              <template v-else>
                <div class="gcontent" style="text-align:center">
                  <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号使用人员信息</span>
                </div>
              </template>
          </div>

          <div class="qheader" :style=" {borderBottom: '0px'}">
            <p>账号信息</p>
          </div>
          <div class="gcontent">
              <component v-model="account"  ref="account" :is="'account'" :isEdit="false" :isShow="true" :ifedit="ifedit" style="margin-left: 20px;"></component>
          </div>
<!--           <div v-show="account.length == 0">
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号信息</span>
            </div>
          </div> -->
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import Axios from 'axios'
  import dataBaseCatalog from './dataBaseCatalog'
  import showDataCatalog from './showDataCatalog'
  import excel from "../../../utils/excel";
  import dataList from './data_model.vue'
  import apiServiceInfo from '../apply_model/open_api_platform_model/apiServiceInfo.vue'
  import server_model from "../apply_model/server_model.vue"

  import projectInfo from '../settledin_test/projectInfo'
  import resoureceInfo from '../settledin_test/resourceInfo'
  import toolInfo from '../settledin_test/toolInfo'
  import account from './accounttemplate.vue'
  import file from '../settledin_test/file'
  import usePeople from './usePeople.vue'

  export default {
    name: "apply",
    components: {
      projectInfo, resoureceInfo,toolInfo,account,file,
      dataBaseCatalog,
      showDataCatalog,
      dataList, apiServiceInfo, server_model,usePeople
    },
    data() {
      return {
        updateModel: 0,
        account:[],
        etlDataList:[],
        apiServiceDatas: [],
        showAPIServiceInfo: false, // 显示api详情model
        apiTitle: "", //api详情title
        apiServInfo: {},
        checked: 1,
        apiServColumns: [
          {
            title: '请求路径',
            key: 'requestUrl',
            width: 200,
          },
          {
            title: 'API中文名',
            key: 'apiLabel',
            width: 200,
          },
          {
            title: '描述',
            key: 'apiDescr',
            minWidth: 150
          },
          {
            title: "请求方法",
            key: "requestMethod",
            minWidth: 150
          },
          {
            title: "数据返回类型",
            key: "responseType",
            minWidth: 150
          },
          {
            title: "创建时间",
            key: "createDt",
            minWidth: 150
          },
          {
            title: "生效时间",
            key: "effDt",
            minWidth: 150
          },
          {
            title: "操作",
            key: "action",
            slot: "action",
            width: 80,
            align: 'center',
          }
        ],

        //数据相关基础信息
        showColumnsCurrent: 1, // 查看关联目录页码
        showColumnsList: [], //当前查看的目录集合
        apiServiceInfo: null, //开发平台申请接口数据
        ucxServiceinfo: null //ucx申请的数据
      }
    },
    created: function() {
      this.getEtlDataList()
    },
    mounted: function() {
      this.account = this.accountList
    },
    methods: {
      /**
       * 获取数据采集交换工具申请的数据目录
       */
      getEtlDataList(){
        this.toolList.forEach(item =>{
          item.toolList.forEach(tool =>{
            if(tool.spServiceType == 'dataEtl' && tool.check && tool.spContent){
              this.etlDataList = tool.spContent.datas
            }else if(tool.spServiceType == 'openApiPlatform' && tool.check && tool.spContent){
              this.apiServiceDatas = tool.spContent.datas
            }
          })
        })
      },
      /**
       * 显示API详情
       * @param {Object} apiCode
       */
      getApiServInfo(apiCode) {
        // 调接口
        var that = this
        var params = {
          apiCode: apiCode
        }
        // 调接口
        this.myAjax.get({
          url: this.CONFIG.progress_url + '/open-api-platform/getApiServInfo',
          that: that,
          params: params,
          success: function(data) {
            that.apiTitle = data.apiLabel
            that.apiServInfo = data
            that.showAPIServiceInfo = true
          }
        })
      },

      // getAccount(account){
      //   console.log("--222-created----",account);
      //   this.account = account
      //   console.log("---created----",this.account);
      // }
    },
    props: {
      reqId: {},
      applyinfo:{},
      roleList: {},
      projectList:{},
      resourcesInfo: {},
      isEdit: {},
      toolInfo: {},
      // account: {},
      filesList: {},
      tempTool: {},

      toolList: {},
      seversList: {},
      ifedit: {},
      ishidden: {
        type: Boolean,
        default: false,
      },
      apiServiceList: {
        default: [],
      },
      accountList:{
        type:Array,
        default:[]
      }
    },
    computed: {
      dataI() {

        return this.applyinfo.datas
      },
      stepTitleId(){

        return this.$parent.stepTitleId
      }
    },
    watch: {
      dataI() {
        if (this.ifedit) {
          this.applyinfo.datas.forEach((item, index) => {
            this.dataInfo.clickindex.push(index)
          });
        }

      },
      stepTitleId(val){
        console.log("va   ---> " ,val)
        if(val == 6){
          // this.account = this.applyinfo.account
          this.getEtlDataList()
          this.updateModel = new Date().getTime()
          this.$forceUpdate()
        }
      },
      accountList(value){
        console.log("[[[accountList",value);
        this.account = value
      }
    }

  }
</script>
